<template>
<!--  <el-form-item label="组件名称" >
    <el-input v-model="optionModel.title" disabled></el-input>
  </el-form-item>
  <el-form-item label="Key">
    <el-input v-model="optionModel.fieldName"></el-input>
  </el-form-item>
  <el-form-item label="Key中文">
    <el-input v-model="optionModel.label" @change="changeLabel"></el-input>
  </el-form-item>
  <el-form-item label="前缀">
    <el-input v-model="optionModel.preSuffix"></el-input>
  </el-form-item>-->
<!--  <el-form-item label="所属表单" >
    <el-select v-model="optionModel.parentForm" :reserve-keyword="false"
               placeholder="选择或者输入"
               allow-create default-first-option clearable filterable>
      <el-option v-for="item in formList" :key="item" :label="item" :value="item"/>
    </el-select>
  </el-form-item>-->
  <el-divider v-if="propertyList && propertyList.length>0">组件配置</el-divider>
  <el-form-item :label="item.label" v-for="(item, index) in propertyList" :key="index">
    <el-input v-model="optionModel.customData[item.fieldName]" v-if="item.type == 'String'"></el-input>
    <el-input-number v-model="optionModel.customData[item.fieldName]" v-if="item.type == 'Number'"></el-input-number>
    <el-switch v-model="optionModel.customData[item.fieldName]" v-if="item.type == 'Switch'"></el-switch>
    <el-select v-model="optionModel.customData[item.fieldName]" placeholder="请选择字典" filterable v-if="item.type == 'Dict'">
      <el-option v-for="(item,index) in commDictList" :label="item.COMM_NAME" :value="item.COMM_ID"/>
    </el-select>
    <el-row v-if="item.type == 'Object'">
      <span style="word-break: break-all">{{JSON.stringify(optionModel.customData[item.fieldName])}}</span>
      <el-button @click="goEditProperty(item)" v-if="item.type == 'Object'">修改属性</el-button>
    </el-row>
    <el-image style="width: 100%;" :src="optionModel.customData[item.fieldName]" fit="fill" v-if="item.type == 'image'"/>
    <input type="file" id="fileInput" accept="image/*" @change="handleImgSuccess($event,item.fieldName)" v-if="item.type == 'image'"/>
<!--    <el-input :value="optionModel.customData[item.fieldName]"  readonly>
      <template #append>
        <el-button @click="goEditProperty(item)">属性</el-button>
      </template>
    </el-input>-->
  </el-form-item>
  <el-dialog :title="title" v-model="open" append-to-body v-if="open">
    <component :is="dynamicComponent" v-model="selectedItemValue"></component>
    <div slot="footer" class="dialog-footer" align="center" style="margin-top: 20px">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {generateId} from "@/utils/util"
import {shallowRef} from "vue";
import {addCustomWidgetSchema} from "@/components/form-designer/widget-panel/widgetsConfig";
import {customSchemas} from "@/components/vform/custom";

export default {
  name: "customData-editor",
  componentName: 'CustomDataEditor',
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  components: {
  },
  inject: ['getContainerWidgets','getCustomSchemas','getCommDictList'],
  data() {
    return {
      open:false,
      title:null,
      dynamicComponent: 'placeholder',
      selectedItem:null,
      selectedItemValue:null,
      customSchemas:customSchemas,
      commDictList:null,
    }
  },
  computed: {
    formList(){
      let fields = [];
      this.getContainerWidgets().forEach(function (val){
        if (val.container.type == "table"){
          fields.push(val.container.options.fieldName)
        }
      })
      return fields
    },
    propertyList(){
      let title = this.optionModel.title
      for (let i = 0; i < this.customSchemas.length; i++) {
        if (title == this.customSchemas[i].options.title){
          return this.customSchemas[i].options.properties
        }
      }
    },
  },
  created() {
    if (localStorage.getItem("accessToken")){
/*      import('@/components/' + "vform"+'/custom')
          .then((module) => {
            this.customSchemas = module.customSchemas;
          })*/
      this.customSchemas = this.getCustomSchemas();
    }
    this.commDictList = this.getCommDictList();
  },
  methods: {
    changeLabel(label){
      if (!this.optionModel.preSuffix){
        this.optionModel.preSuffix = label
      }
    },
    handleImgSuccess(event,fieldName){
      const file = event.target.files[0];
      const self = this;
      if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const base64String = e.target.result;
          self.optionModel.customData[fieldName] = base64String
        };
        reader.readAsDataURL(file);
      }
    },
    goEditProperty(item){
      import("/src/components/vform/custom/"+this.selectedWidget.designComponentName + "/" +"property/"+ item.component +".vue").then((component) => {
        // 导入成功后，将组件设置为导入的组件
        this.dynamicComponent = shallowRef(component.default);
      }).catch(error => {
        // 处理导入组件时的错误
        console.error('Dynamic component loading failed:', error);
      });
      this.title = item.label+"属性编辑"
      this.open = true;
      this.selectedItem = item;
      this.selectedItemValue = this.optionModel.customData[this.selectedItem.fieldName]
    },
    submitForm(){
      this.optionModel.customData[this.selectedItem.fieldName] = this.selectedItemValue
      this.open = false;
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
